<template>
    <div class="data-container">
        <div class="block-cont block">
            <div class="recta">
                <div>今日收入</div>
                <div>￥{{data.dayIncome}}</div>
            </div>
            <div class="recta" v-if="obj.level<3">
                <div>今日支出</div>
                <div>￥{{data.dayAccount}}</div>
            </div>
            <div class="recta">
                <div>历史总收入</div>
                <div>￥{{data.totalIncome}}</div>
            </div>
            <div class="recta" v-if="obj.level<3">
                <div>历史总支出</div>
                <div>￥{{data.totalAccount}}</div>
            </div>
        </div>
        <div class="gray-item"></div>
        <ul class="nav-list">
            <li class="item">
                <h3>数据报表</h3>
            </li>
            <router-link tag="li" to="/data/dayInList" class="item">
                <div class="item-icon icon1"></div>
                <div class="item-word">日收入明细</div>
                <div class="arrow"></div>
            </router-link>
            <router-link tag="li" to="/data/dayOutList" v-if="obj.level<3" class="item">
                <div class="item-icon icon2"></div>
                <div class="item-word">日支出明细</div>
                <div class="arrow"></div>
            </router-link>
            <router-link tag="li" to="/data/dayProfitList" class="item" v-if="obj.level<2">
                <div class="item-icon icon3"></div>
                <div class="item-word">分润收入明细</div>
                <div class="arrow"></div>
            </router-link>
            <router-link tag="li" class="item" to="/tixian_record">
                <div class="item-icon icon4"></div>
                <div class="item-word">提现明细</div>
                <div class="arrow"></div>
            </router-link>
            <router-link tag="li" class="item" to="/data/userData">
                <div class="item-icon icon5"></div>
                <div class="item-word">用户数据</div>
                <div class="arrow"></div>
            </router-link>
        </ul>
        <com-footer :currentIndex="cuIndex"></com-footer>
    </div>
    
</template>
<script>
    import comFooter from '../../components/comFooter';
    import dataApi from '../../api/data.js';
    import { Toast } from 'mint-ui';
    export default {
        components: {
            comFooter
        },
        data () {
            return {
                cuIndex: 1,
                data: {},
                obj: {}
            }
        },
        created() {
            let str = localStorage.getItem('dongHang_data');
            this.obj = JSON.parse(str);
            dataApi.indexData(this.obj.agentId).then(res => {
                if (res.code == 0) {
                    this.data = res.t;
                } else {
                    Toast({
                        message: res.message,
                        duration: 2000
                    });
                }
            })
            
        },
    }
</script>
<style lang="less" scoped>
    .block {
        padding-top: .3rem;
        overflow: hidden;
        font-size: .3rem;
        .recta {
            margin-bottom: .3rem;
            padding-top: .4rem;
            float: left;
            height: 1.66rem;
            border-radius: .10rem;
            box-shadow: 0 0.01rem 0.06rem 0 rgba(4, 0, 0, 0.35);
            width: 3.30rem;
            height: 1.66rem;
            margin-left: 0.3rem;
            box-sizing: border-box;
            div {
                text-align: center;
            }
        }
    }
    .block-today {
        margin-bottom: .3rem;
    }
    .gray-item {
        height: .3rem;
        background-color: #efefef;
    }
    .nav-list {
        .item {
            padding: 0 .3rem;
            font-size: .28rem;
            height: .8rem;
            border-bottom: 1px solid #ccc;
            div {
                float: left;
            }
            .item-icon {
                margin-top: .2rem;
                margin-right: .2rem;
                width: .4rem;
                height: .4rem;
                background-size: contain;
                background-repeat: no-repeat;
            }
            .item-word {
                height: .8rem;
                line-height: .8rem;
            }
            .icon1 {
                background-image: url(../../assets/img/in-icon.png);
            }
            .icon2 {
                background-image: url(../../assets/img/out-icon.png);
            }
            .icon3 {
                background-image: url(../../assets/img/cash-icon.png);
            }
            .icon4 {
                background-image: url(../../assets/img/trans-icon.png);
            }
            .icon5 {
                background-image: url(../../assets/img/user.png);
                width: .43rem;
                height: .43rem;
            }
            .arrow {
                margin-top: .3rem;
                float: right;
                width: .12rem;
                height: .2rem;
                background-size: contain;
                background-repeat: no-repeat;
                background-image: url(../../assets/img/next-icon.png);
            }
        }
        h3 {
            font-size: .3rem;
            height: .8rem;
            line-height: .8rem;
        }
    }
</style>